<template>
	<!-- 订单界面 -->
	<!-- 头部选择标签部分 -->
	<view class="order-tab">
		<view v-for="(item,index) in tab" :key="index" @click="selectTab(index,item.query)">
			<text>{{item.name}}</text>
			<text :class="{'tab-select' : index == tabIndex}"></text>
		</view>
	</view>
	<view style="height: 60rpx;"></view>

	<!-- 订单 -->
	<view class="order-back" v-for="(item,index) in order_data" :key="index">
		<!-- 订单编号 -->
		<view class="order-top">
			<text>订单编号：{{item.order_number}}</text>
			<text v-if="item.pay_status == 0">待付款</text>
			<text v-if="item.pay_status == 1 && item.deliver_status == 0 ">待发货</text>
			<text v-if="item.pay_status == 1 && item.deliver_status == 1 ">待收货</text>
			<text v-if="item.pay_status == 1 && item.deliver_status == 3 ">待退款</text>
			<text v-if="item.pay_status == 1 && item.deliver_status == 4 ">已退款</text>
		</view>

		<!-- 上部分 -->
		<view class="order-card">
			<!-- 商品图片 -->
			<view>
				<image :src="item.goods_image" mode="aspectFill"></image>
			</view>
			<!-- 商品题目和规格 -->
			<view>
				<text class="order-title-padding">{{item.goods_title}}</text>
				<text class="order-specs" v-if="item.specs.length > 0">{{item.specs[0].att_val}}</text>
				<text class="order-refund" v-if="item.deliver_status==3||item.deliver_status==4">退款理由:{{item.refund_reason}}</text>
			</view>
			<!-- 价格和数量 -->
			<view>
				<text class="order-title-padding order-num">¥{{item.goods_price}}</text>
				<text class="order-num">x{{item.buy_amount}}</text>
			</view>
		</view>
		
		<!-- 订单用户信息以及合计 -->		
		<view class="user-total">
			<view class="user-info">
				<text>{{item.address[0].name}}</text>
				<text>{{item.address[0].telephone}}</text>
			</view>
			<!-- 合计 -->
			<view class="order-total">
				<text>合计</text>
				<text>¥{{item.subtotal}}</text>
			</view>
		</view>
		
		<!-- 订单状态 -->
		<!-- 待付款 -->
		<view class="order-button" v-if="item.pay_status == 0">
			<text class="user-address">{{item.address[0].region}} {{item.address[0].address}}</text>
			<text class="order-button-a">待付款</text>
		</view>

		<!-- 已付款 -->
		<view class="order-button" v-if="item.pay_status == 1">
			<text class="user-address">{{item.address[0].region}} {{item.address[0].address}}</text>
			<block v-if="item.deliver_status == 0 ">
				<text class="order-button-b" @click="clickDeliver(item,index)">发货</text>
			</block>
			<block v-if="item.deliver_status == 1 ">
				<text class="order-button-a">已发货</text>
			</block>
			<block v-if="item.deliver_status == 3 ">
				<text class="order-button-b" @click="refund(item,index)">确认退款</text>
			</block>
			<block v-if="item.deliver_status == 4 ">
				<text class="order-button-a">已退款</text>
			</block>
		</view>
	</view>

	<!-- 没有数据的提示 -->
	<view class="tips" v-if="order_data.length == 0">没有订单数据</view>

	<!-- 上拉加载的提示 -->
	<view class="loading-height">
		<Loading v-if="loading"></Loading>
	</view>

	<!-- 填写运单号的弹窗 -->
	<view>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入内容" placeholder="请输入运单号" @confirm="deliver"></uni-popup-dialog>
		</uni-popup>
	</view>


</template>

<script setup>
	import { ref, reactive, toRefs, onMounted } from 'vue'
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import { init } from "@/public/package-js/init.js"
	import Loading from "@/component/loading/loading.vue"
	import { FeedBack } from "@/public/package-js/feedBack.js"

	const data = reactive({
		tab: [ // 顶部选项部分
			{ name: '待支付', query: { pay_status: 0 } },
			{ name: '待发货', query: { pay_status: 1, deliver_status: 0 } },
			{ name: '待收货', query: { pay_status: 1, deliver_status: 1 } },
			{ name: '退款/售后', query: {} }
		],
		tabIndex: 0, // tab默认选择下标
		loading: false, // 上拉加载小圆圈
		pageNum: 0, // 请求的页数，每请求一次，页数 +1
		order_data: [], // 订单数据 

		order_index: 0, // 点击发货订单的下标
		order_id: '' // 点击发货的订单 id
	})
	const { tab, tabIndex, loading, order_data, waybill, waybill_input } = toRefs(data)

	// 页面加载显示数据
	onMounted(async () => {
		// 默认请求第一个
		getData(0, data.tab[0].query)

		// 以下写就可以进行多个字段的查询 查询 退款中 或 已经退款的
		let db = await init()
		const _ = db.database().command
		// 赋值给头部退款售后的 query，用于后续查询
		data.tab[3].query = { pay_status: 1, deliver_status: _.or(3, 4) }
	})


	// 1、点击切换顶部选项
	function selectTab(index, query) {
		data.tabIndex = index
		data.pageNum = 0
		data.order_data = [] // 清空
		let skip = data.pageNum * 10
		getData(skip, query)
	}

	// 2、请求数据
	async function getData(skip, query) {
		let db = await init()
		const res = await db.database().collection('order_data').where(query).limit(10).skip(skip).orderBy('order_time', 'desc').get()
		// 考虑到上拉加载
		data.order_data = [...data.order_data, ...res.data]
	}

	// 3、上拉加载 
	onReachBottom(async () => { //onReachBottom只能在父组件才能触底
		data.loading = true
		data.pageNum++
		let skip = data.pageNum * 10
		let query = data.tab[data.tabIndex].query
		await getData(skip, query)
		data.loading = false
	})

	// 4、点击发货
	const inputDialog = ref(null) // 弹窗
	const inputClose = ref(null) // 弹窗关闭
	function clickDeliver(item, index) {
		inputDialog.value.open() // 开启弹窗
		inputClose.value.val = '' // 清空输入框
		data.order_id = item._id
		data.order_index = index
	}
	// 点击确定按钮
	async function deliver(val) {

		// 如果未输入或者输入都是空格
		if (val.split(" ").join("").length == 0) {
			new FeedBack('请正确填写运单号', 'none').toast()
			return false
		}
		uni.showLoading({
			title: '发货中',
			mask: true
		})
		let db = await init()
		const res = await db.database().collection('order_data').doc(data.order_id).update({
			data: {
				deliver_status: 1,
				waybill_No: val
			}
		})
		// 将发货的从当前列表删除，这样就不用再次请求数据
		data.order_data.splice(data.order_index, 1)
		new FeedBack('发货成功', 'success').toast()
		inputClose.value.val = '' // 清空输入框
		inputDialog.value.close() // 关闭弹窗

	}

	// 5、确认退款
	async function refund(item, index) {
		uni.showLoading({
			title: '退款申请中',
			mask: true
		})
		let db = await init()
		const $ = db.database().command.aggregate
		// 退款成功
		await db.database().collection('order_data').doc(item._id).update({
			data: { deliver_status: 4 }
		})
		new FeedBack('退款成功', 'success').toast()
		data.order_data[index].deliver_status = 4
	}
</script>

<style lang="less">
	page {
		background-color: #f4f4f4;
	}

	.order-tab {
		height: 60rpx;
		background-color: #f4f4f4;
		display: flex;
		justify-content: space-around;
		color: #000000;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}

	.order-tab view {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.tab-select {
		display: block;
		width: 40rpx;
		height: 10rpx;
		border-radius: 50rpx;
		background-color: #ea4050;
		position: absolute;
		bottom: 0;
	}

	/* 订单卡片 */
	.order-back {
		background-color: #fefefe;
		padding: 20rpx;
		margin: 20rpx 10rpx;
		border-radius: 10rpx;
	}

	/* 订单编号部分 */
	.order-top {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #d6d6d6;

		text {
			font-size: 28rpx;
		}

		&>text:nth-child(1) {
			color: #6f7073;
		}

		&>text:nth-child(2) {
			color: red;
		}
	}

	.order-card image {
		width: 150rpx;
		height: 150rpx;
		display: block;
		border-radius: 8rpx;
	}

	.order-card {
		display: flex;
	}

	.order-card view:nth-child(2) {
		flex: 1;
		padding: 0 20rpx;
	}
	

	.order-title-padding {
		margin-bottom: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.order-specs {
		background-color: #fafafa;
		font-size: 27rpx;
		color: #767676;
		padding: 10rpx;
		border-radius: 9rpx;
		display: flex;
	}
	
	.order-refund{
		color: #e84d00;
		font-size: 27rpx;
		padding: 10rpx;
	}

	.order-num {
		color: #8b8c90;
	}
	
	// 用户信息
	.user-total{
		display: flex;
		justify-content: space-between;
		margin-top: 25rpx;
		.user-info{
			&>text{
				margin-right: 20rpx;
				color: #727375;
			}
		}
	}
	

	/* 合计 */
	.order-total {
		display: flex;
	}

	.order-total text {
		display: block;
		padding-left: 20rpx;
	}

	.order-total text:nth-child(1) {
		color: #8b8c90;
	}

	.order-total text:nth-child(2) {
		font-weight: bold;
		font-size: 34rpx;
	}

	/* 按钮 */
	.order-button {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.order-button text:nth-child(1) {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 28rpx;
		padding: 10rpx 0;
		color: #8b8c90;
		margin-top: -10rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.order-button text:nth-child(2) {
		padding: 15rpx 35rpx;
		border-radius: 10rpx;
	}
	
	.user-address{
		width: 480rpx;
		height: 80rpx;
	}
	
	

	.order-button-a {
		border: 1rpx solid #d7d8d8;
		color: #8b8c90;
	}

	.order-button-b {
		background-color: #ea4050;
		color: #FFFFFF;
	}

	/* 运单号 */
	.waybill-view {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 400rpx;
		height: 200rpx;
		background-color: #FFFFFF;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.waybill-view button {
		margin: inherit;
	}

	.waybill-view view {
		display: flex;
		justify-content: space-between;
		position: absolute;
		bottom: 20rpx;
		left: 20rpx;
		right: 20rpx;
	}
</style>
